import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import axios from 'axios';
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Loan extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loanList: ['zhangan'],
            linkUrl: []
        }

    }

    componentDidMount() {
        // this.getlist()
        var index;
        var that = this
        jquery(".loanul").on("click", "li", function () {
            var id = jquery(this).data("id");
            that.addCount(id)
            index = jquery(this).index();
            jquery(this).children('a').attr('href', that.state.linkUrl[index])
        });
    }

    async addCount(id) {
        let res = await util.rjax({
            url: '/other/addCount/' + id,
            type: 'post'
        })
    }

    // async getlist() {
    //     let res = await util.rjax({
    //         url: '/other/list',
    //         type: 'get',
    //     })
    //     this.setState({ loanList: res.rows });
    //     var arr = []
    //     for (let i in res.rows) {
    //         arr.push(res.rows[i].linkUrl)
    //     }
    //     this.setState({ linkUrl: arr })
    // }

    render() {
        //方式1:
        let loans = this.state.loanList.map((item, index) => {
            return (
                <li className="clickli" data-id={item.id} key={index}>
                    <a href="#">
                        <img className="iconimg" src={item.image} alt="" />
                        <div className="loandel">
                            <p className="loanname">{item.title}</p>
                            <p className="advance">{item.summary}</p>
                            <p className="applynum">申请人数&nbsp;<i>{item.count}</i>&nbsp;人</p>
                        </div>
                        <span className="entericon"><img src="/assets/wechat/arrow.png" alt="" /></span>
                    </a>
                </li>
            )
        })
        return (
            <div>
                <div id="loan">
                    <ul className="loanul">
                        {loans}
                    </ul>
                </div>
            </div>
        )
    }
}
ReactDom.render(<Loan />, document.getElementById("app"));